<template>
  <view class="box">
    <view class="main">
      <view style="text-align:center; font-size:28rpx; font-weight:bold;">
        家人认证
      </view>
      <view>
        <u-form :model="form" ref="uForm" label-width="120">
          <u-form-item :border-bottom="false" :required="true" label-position="top" label="请输入姓名" prop="userName">
            <u-input v-model="form.userName" placeholder="绑定家人姓名" border />
          </u-form-item>
          <u-form-item :border-bottom="false" :required="true" label-position="top" label="请输入身份证号" prop="idCardIphone">
            <u-input v-model="form.idCardIphone" placeholder="请输入家人身份证" border maxlength="18" />
          </u-form-item>
          <u-form-item :border-bottom="false" :required="true" label-position="top" label="请输入SN码" prop="SNcode">
            <u-input v-model="form.SNcode" placeholder="请输入SN码" border />
          </u-form-item>
          <u-form-item :border-bottom="false" :required="true" label-position="top" label="手机号" prop="iphone">
            <u-input v-model="form.iphone" placeholder="请输入待绑定手机号码" border type="number" maxlength="11" />
          </u-form-item>
          <u-form-item :border-bottom="false" :required="true" label-position="top" label="验证码" prop="authCode">
            <u-input v-model="form.authCode" placeholder="请输入验证码" border type="number" maxlength="6" />
            <text slot="right" :style="codeStatus ? 'color: #2AC630;' : 'color: #999999;'" class="codeText"
              @tap="getCode">{{ codeTips }}</text>
          </u-form-item>
        </u-form>
      </view>
      <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
      <view style="margin-top:24rpx;">
        <span style="font-size: 28rpx;color: #000000;">友情提示：获取手机号认证弹窗提示此用户未在本平台购买过商品暂无数据，请下单后再添加，谢谢。</span>
      </view>
    </view>
    <view class="footer" @tap="submit">
      提交
    </view>
  </view>
</template>

<script>
import { Sms } from '@/api/main'
import { deviceOpen } from '@/api/health'
let that = null;
export default {
  data() {
    return {
      form: {
        userName: null,
        idCardIphone: null,
        SNcode: null,
        iphone: null,
        authCode: null
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式 
            trigger: ['change', 'blur'],
          }
        ],
        idCardIphone: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { validator: this.validateIdCard, trigger: 'blur' }
        ],
        SNcode: [
          {
            required: true,
            message: '请输入SN码',
            // 可以单个或者同时写两个触发验证方式 
            trigger: ['change', 'blur'],
          }
        ],
        iphone: [
          {
            required: true,
            message: '请输入手机号',
            // 可以单个或者同时写两个触发验证方式 
            trigger: ['change', 'blur'],
          },
          {
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// this.$u.test.mobile()就是返回true或者false的
						return this.$u.test.mobile(value);
					},
					maxlength: 11,
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}
        ],
        authCode: [
          {
            required: true,
            message: '请输入验证码',
            // 可以单个或者同时写两个触发验证方式 
            trigger: ['change', 'blur'],
          }
        ],
      },
      codeTips: '',
      codeStatus: true,
    }
  },
  methods: {
    validateIdCard(rule, value, callback) {
       // 身份证号码正则表达式  
       const idCardRegex =
          /^(1[1-5]|2[1-3]|3[1-7]|4[1-6]|5[0-4]|6[1-5]|7[0-1]|8[1-3])\d{4}((19|20)\d{2})(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
        if (!idCardRegex.test(value)) {
          callback(new Error('请输入正确的身份证号码'));
        } else {
          // 如果需要，可以在这里添加额外的验证逻辑，比如检查身份证生日是否合法等  
          callback();
        }
    },
    codeChange(text) {
      this.codeTips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: '正在获取验证码',
          mask: true
        })
        let obj = {
          phone: this.form.phone,
          showLoading: true
        }
        Sms(obj).then(res => {
          console.log('看看验证码', res)
          uni.hideLoading();
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
          this.$u.toast(res.message);
          this.codeStatus = false;
        })
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    submit(){
      this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
          let obj={
            deviceCode: this.form.SNcode,
            devicePhone: this.form.iphone,
            deviceUserName: this.form.userName,
            userIdentityCard: this.form.idCardIphone,
          }
          deviceOpen(obj).then(res=>{
            console.log('设备绑定',res)
          })
				} else {
					console.log('验证失败');
				}
			});
    }
  },
  onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 32rpx;

  .main {
    width: 100%;
    background-color: white;
    padding: 32rpx 24rpx;
  }
  .footer{
    text-align:center; 
    color:white; 
    background-color:#D12C25;
    border-radius: 1998rpx; 
    padding:26rpx 0; 
    margin-top:288rpx;
  }
  ::v-deep .u-form-item{
    padding: 0 !important;
  }
}
</style>